<template>
  <div class="home">
    <Scroll :on-reach-bottom="handleReachBottom" :height="heig_socket">
      <div :class="context.content" v-for="time in GoodsList" v-if="state == 'vertical'">
       <ul :class="context.ul">
        <li :class="context.img">
          <img :src="time.image"  alt="">
          <!--<img :src="img_class(time.goods.id)" alt="">-->
        </li>
        <li :class="context.info">
          <div :class="context.goodsname">
            {{time.name}}
          </div>
          <div :class="context.pricea">
            ￥{{time.price}}
          </div>
          <div :class="context.goostext">
            {{time.text}}
          </div>
        </li>
      </ul>
    </div>

      <div :class="context.content" v-if="state == 'horizontal'">
          <ul :class="context.ul" v-for="time in GoodsList">
            <li :class="context.img">
              <img :src="time.image" alt="">
              <!--<img :src="img_class(time.goods.id)" alt="">-->
            </li>
            <li :class="context.info">
              <div :class="context.goodsname">
                {{time.name}}
              </div>
              <div :class="context.pricea">

                ￥<em>{{time.price}}</em>
              </div>
              <div :class="context.goostext">
                {{time.text}}
              </div>
            </li>
          </ul>
      </div>
    </Scroll>

  </div>
</template>
<script>
  export default {
    props: {
      GoodsList: {
        type: Array,
        default() {
          return []
        }
      },
      state:{
        type: String,
        default() {
          return 'horizontal';
          // horizontal 横
          //vertical  竖
        }
      },
      heig_socket:{ //高度
        type: String,
        default() {
          return '100%';
        }
      },
    },
    components: {},
    data() {
      return {
        // heig_socket:'',
        context:{}
      }
    },
    methods: {
      img_class(r){
        let url = this.$imgList.Goodsimage[r];
        let host = this.$ENV.UPLOADIMG;
        let res = `${host}${url}`;
        return res;
      },
      handleReachBottom () {
        return new Promise(resolve => {
          return setTimeout(() => {
            this.$emit('Page_Length',2);

            // for (let i = 1; i < this.GoodsList.length; i++) {
            //   this.GoodsList.push(this.GoodsList[i]);
            // }
            resolve();
          }, 1000);
        });
      }
    },
    watch: {},
    computed: {
      //计算属性
    },
    created() {
      // horizontal 横
      //vertical  竖
      switch (this.state) {
              case 'horizontal':
           this.context={
                  content: 'flextent',
                  ul: 'flex_ul',
                  img:'flex_img',
                  info:'flex_info',
                  goodsname:'flex_goodsname',
                  pricea:'flex_price',
                  goostext:''
              };
                break;
              case 'vertical':
             this.context =  {
                  content: 'content',
                  ul: 'con_ul',
                  img:'con_img',
                  info:'con_info',
                  goodsname:'con_goodsname',
                  pricea:'con_price',
                  goostext:'con_goodstext textdisplay'
                };
                break;
            }
    },
    mounted() {
      // this.heig_socket = window.screen.height;
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
    background:#f7f7f7;

  }
  /******************************* 左右 ************************************/
  .flextent{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 4px;
    position: relative;
  }
  .flex_ul{
    background-color: #fff;
    padding-bottom: 6px;
    font-size: 0;
    margin-top: 6px;
    float: left;
    width: 50%;
    border-right: 1px solid #f7f7f7;
  }
  .flex_ul li{
/*margin-left:calc(100vw / 2*0.025);*/
  }
  .flex_img{

  }
  .flex_img img{
    height: calc(100vh / 4);
    width: calc(100vw / 2*0.96);
    background-size: 100% 100%;
    margin: auto;
  }
  .flex_info{
    width:100%;
    height:60px;
  }
  .flex_goodsname{
    height: 33px;
    font-size: 12px;
    /*width: 100%;*/
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2; /*第几排被隐藏*/
    -webkit-box-orient: vertical;;
    word-break: break-word;
    color: #657180;
    margin-top: 5px;
    line-height: 17px;
    margin-bottom: 3px;
    padding: 0 6px;
    text-indent: 7px;
  }
  .flex_price{
    width:100%;
    height:21px;
    font-size: 12px;
    color: #e93b3d;
    text-indent: 8px;
  }

/***************************上下****************************************/
  .content {
    width: 100%;
    height: 120px;
    background-color: #fff;
  }

  .con_ul {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .con_ul li {
    float: left;
  }
  .con_img{
    width: 34%;
    height: 100%;
    overflow: hidden;
  }
  .con_img img{
    width:120px;
    height:100%;
  }
  .con_info{
    width: 65%;
    height: 100%;
    border-bottom: 1px solid #eeeeee
  }
  .con_goodsname{
    width:100%;
    height:31px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    color: #232326;
    line-height: 16px;
    margin-top: 8px;
    text-indent: 8px;
  }
  .con_price{
    width:100%;
    height:21px;
    margin-top: 20px;
    font-size: 16px;
    color: #e93b3d;
    text-indent: 8px;
  }
  .con_goodstext{
    width:100%;
    height:21px;
    margin-top: 8px;
    color: #9ea7b4;
    text-indent: 8px;
  }



</style>
